Icon buttons Guidelines 圖示按鈕指導規則

Usage 使用方式

圖示按鈕（Icon Buttons）可用於輕量級互動，如收藏、分享、播放或刪除等操作。

圖示按鈕的型別：標準圖示按鈕（Standard Icon Button）填充式圖示按鈕（Contained Icon Button）

圖示按鈕可用於底部應用欄元件內

如果你想讓按鈕在頁面上更容易看到，可以使用帶背景的圖示按鈕。兩種按鈕（帶背景和不帶背景）的功能完全一樣，選擇哪種主要看設計需求。

✓ 如果需要更清晰的介面層次或區分操作，可以用實心圖示按鈕，這樣更容易引導使用者注意關鍵功能。
× 不要把實心圖示按鈕和填充按鈕或描邊按鈕放在一起用，否則介面看起來層次不清，使用者可能不知道哪個更重要。

填充圖示按鈕具有更高的視覺衝擊力，最適用於需要高度強調的操作。

填充式圖示按鈕：高優先順序操作，適用於主要功能。
色調填充圖示按鈕：次高優先順序，適用於次要但仍需強調的操作。
輪廓圖示按鈕：中等優先順序，適用於導航或輔助操作。如左右滑動導航按鈕。

Anatomy 結構

1 icon 2 Container

Icon 圖示

圖示按鈕要使用常見的系統圖示，讓使用者一眼就能看懂。當使用者把滑鼠放在按鈕上時，要顯示提示文字，解釋這個按鈕的用途。

Container 容器

容器的設計讓圖示更容易被看到和理解。主要在兩種情況下使用：

  1. 當按鈕需要突出顯示時，比如重要操作按鈕
  1. 當頁面背景比較複雜時，用容器讓按鈕更容易與背景區分開來

Placement 放置

圖示按鈕應該放在哪裡：

Behavior 行為

Hover 懸停

滑鼠懸停時，按鈕應放大或高亮，提升可見性。工具提示（Tooltip）應清晰描述按鈕的功能。

Selection  選擇

切換按鈕（Toggle）應提供視覺反饋，幫助使用者區分選中和未選中狀態。

✓ 確保選中狀態明顯，避免使用者誤解按鈕的當前狀態。

× 不要在重要操作中使用低對比度的圖示，以免影響可讀性。

Indicating selection  指示選擇

圖示使用空心樣式表示未選擇，實心樣式表示已選擇。比如在新增書籤或收藏時，點選後圖示會從空心變成實心，讓使用者清楚知道當前的選中狀態。

Interaction & style  互動與樣式

確保圖示按鈕的對比度至少為 3:1，以提高可讀性。

✓ 推薦：透過3:1 對比度測試的圖示按鈕示例。
× 避免：低對比度的圖示按鈕，不符合可訪問性標準。

Layout and density  佈局與密度

你可以把多個圖示按鈕放在一起使用，也可以單獨使用一個按鈕。為了讓使用者能夠輕鬆準確地點選到按鈕，每個圖示按鈕的可點選區域要有48dp那麼大。